<template>
  <div class="main">
    <el-row style="margin-top: 8px;margin-left: 9px;">
      <el-col :span="15">
        <el-date-picker
          v-model="rq"
          type="date"
          value-format="yyyy/MM/dd"
          placeholder="选择日期"
          style="width: 100%;">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row style="margin-top: 8px;margin-left: 9px;">
      <el-col :span="15">
        <el-select v-model="department" placeholder="请选择" style="width: 100%;">
          <el-option label="全部" value="1"></el-option>
          <el-option label="仓库" value="2"></el-option>
          <el-option label="司机" value="3"></el-option>
          <el-option label="文员" value="4"></el-option>
          <el-option label="门市仓库" value="5"></el-option>
          <el-option label="业务" value="6"></el-option>
          <el-option label="跟车" value="7"></el-option>
        </el-select>
      </el-col>
      <el-col :span="9">
        <el-button type="primary" style="margin-left: 5px;" @click="query">查询</el-button>
      </el-col>
    </el-row>



    <el-table
      :data="result"
      v-loading="loading"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="姓名"
        width="80">
      </el-table-column>
      <el-table-column
        prop="schedule.scheduleList[0].schedule_info.schedule_name"
        label="排班"
        width="80">
        <template slot-scope="scope">
          {{scope.row.schedule.schedule.scheduleList[0].schedule_info.schedule_name}}
        </template>
      </el-table-column>
      <el-table-column
        prop="signData"
        label="打卡时间"
      >
        <template slot-scope="scope">
          <div v-for="item in scope.row.signData" style="margin-bottom: 5px;">
            <el-tag v-if="item.exception_type !== '未打卡'">{{ dateFormat('HH:MM:SS' ,new Date(item.checkin_time*1000)) }}</el-tag>
            <el-tag style="margin-left: 5px;" v-if="item.exception_type === ''">{{ item.checkin_type }}</el-tag>
            <el-tag style="margin-left: 5px;" type="danger" v-else>{{ item.exception_type }}</el-tag>
          </div>
          <el-tag v-if="scope.row.signData.length === 0" type="danger">未打卡</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {getAccessToken, getPartMember, getSingleSign, getSchedule} from "@/api/weixin";
import Vue from "vue";

async function api(date, department) {
  let access = await getAccessToken()
  access = access.access_token
  let member = await getPartMember(access, department)
  let member_list = []
  let member_dict = {}
  member.userlist.forEach((each) => {
    member_list.push(each.userid)
    member_dict[each.userid] = each.name
  })

  let data = {
    "starttime": new Date(date + ' 0:00:00').getTime() / 1000,
    "endtime": new Date(date + ' 23:59:59').getTime() / 1000,
    "useridlist": member_list
  }

  let schedule = await getSchedule(access, data)

  let signData = {
    "opencheckindatatype": 3,
    "starttime": new Date(date + ' 0:00:00').getTime() / 1000,
    "endtime": new Date(date + ' 23:59:59').getTime() / 1000,
    "useridlist": []
  }

  let arr = schedule.schedule_list.map(x => {
    return x.userid
  })

  signData.useridlist = arr
  let signResult = await getSingleSign(access, signData)

  let result = []
  arr.forEach((each) => {
    let data1 = {
      id: each,
      name: member_dict[each],
      signData: [],
      schedule: null
    }

    signResult.checkindata.forEach((each1) => {
      if (each1.userid === each) {
        data1.signData.push(each1)
      }
    })

    schedule.schedule_list.forEach((each1)=>{
      if(each1.userid === each) {
        data1.schedule = each1
      }
    })

    result.push(data1)
  })


  return result

}

export default {
  name: "sign",
  data() {
    return {
      result: [],
      loading: false,
      department: "1",
      rq: this.dateFormat('YYYY/mm/dd', new Date())
    }
  },
  methods: {
    dateFormat(fmt, date) {
      let ret;
      const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
      };
      for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        }
        ;
      }
      ;
      return fmt;
    },
    query(){
      this.loading = true
      api(this.rq, this.department).then((res)=>{
        this.result = res
      }).finally(()=>{
        this.loading = false
      })
    }
  },
  mounted() {
    this.loading = true
    api(this.rq, this.department).then((res) => {
      this.result = res
    }).finally((res)=>{
      this.loading = false
    })
  }
}
</script>

<style scoped>
  .main{
    max-width: 600px;
  }
</style>
